<script>
    if(!location.hash.replace('#', '').length) {
        location.href = location.href.split('#')[0] + '#' + (Math.random() * 100).toString().replace('.', '');
        location.reload();
    }
</script>

<title>Broadcast Multiple-Cameras using RTCMultiConnection.js</title>
<h1>Broadcast Multiple-Cameras using <a href="http://www.rtcmulticonnection.org/">RTCMultiConnection.js</a>
</h1>
<style>
video {
    width: 30%
}

button {
    font-family: Myriad, Arial, Verdana;
    font-weight: normal;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 4px 12px;
    text-decoration: none;
    color: rgb(27, 26, 26);
    display: inline-block;
    box-shadow: rgb(255, 255, 255) 1px 1px 0px 0px inset;
    text-shadow: none;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.05, rgb(241, 241, 241)), to(rgb(230, 230, 230)));
    font-size: 20px;
    border: 1px solid red;
}

button[disabled] {
    background: rgba(216, 205, 205, 0.2);
    border: 1px solid rgb(233, 224, 224);
    outline: none;
    box-shadow: none;
}

blockquote {
    font-size: 20px;
    color: rgb(172, 10, 10);
    border: 1px solid rgb(172, 10, 10);
    padding: 5px 10px;
    border-radius: 5px;
    margin: 9px 10px;
}
</style>
<blockquote style="background: #f3b7b7;border: 5px solid black;border-radius: 5px; padding: 10px;">
    This demo is <span style="border: 1px dotted red; background: yellow; padding: 2px 5px;">out-dated i.e. deprecated (written in 2013)</span>.

    <br><br>
    Please try other demos: <a href="https://github.com/muaz-khan/RTCMultiConnection">https://github.com/muaz-khan/RTCMultiConnection</a>
</blockquote>
<hr />
<div id="buttons-container">
    <button id="broadcast-all-cameras" disabled>Broadcast All Cameras</button>
</div>
<blockquote>
    This demo is using <a href="http://www.rtcmulticonnection.org/">RTCMultiConnection.js</a>. This demo enumerates over all available video devices, and appends &lt;button&gt; for each device. You can click any button to capture relevant webcam. Then you can click "Broadcast All Cameras" button to broadcast your "multiple-cameras" over multiple users.
</blockquote>
<hr />

<div id="videos-container"></div>

<script src="https://cdn.webrtc-experiment.com/DetectRTC.js"></script>

<script src="https://cdn.webrtc-experiment.com/socket.io.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="https://cdn.webrtc-experiment.com/CodecsHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/IceServersHandler.js"></script>
<script src="https://cdn.webrtc-experiment.com/RTCMultiConnection.js"></script>
<script>
var connection = new RTCMultiConnection();

// https://github.com/muaz-khan/WebRTC-Experiment/tree/master/socketio-over-nodejs
var SIGNALING_SERVER = 'https://socketio-over-nodejs2.herokuapp.com:443/';
connection.openSignalingChannel = function(config) {
    var channel = config.channel || connection.channel || 'default-namespace';
    var sender = Math.round(Math.random() * 9999999999) + 9999999999;

    io.connect(SIGNALING_SERVER).emit('new-channel', {
        channel: channel,
        sender: sender
    });

    var socket = io.connect(SIGNALING_SERVER + channel);
    socket.channel = channel;

    socket.on('connect', function() {
        if (config.callback) config.callback(socket);
    });

    socket.send = function(message) {
        socket.emit('message', {
            sender: sender,
            data: message
        });
    };

    socket.on('message', config.onmessage);
};

connection.onNewSession = function(session) {
    connection.join(session);
};

// connection.getExternalIceServers = false; // optional--remove it.
// connection.iceServers.length = 1;         // optional--remove it.

connection.dontCaptureUserMedia = true;

// Parent <div> for videos
connection.body = document.getElementById('videos-container');

connection.session = {
    audio: true,
    video: true
};

connection.direction = 'one-way';

connection.sdpConstraints.mandatory = {
    OfferToReceiveAudio: true,
    OfferToReceiveVideo: true
};

var buttonsContainer = document.getElementById('buttons-container');
// DetectRTC.load --- to make sure all devices are captured
// connection.enumerateDevices --- to get list of all captured devices

var skipDuplicateDevies = {};
var uniqueCamerasLength = 0;
DetectRTC.load(function() {
    // iterate over devices-array
    DetectRTC.MediaDevices.forEach(function(device) {
        if (skipDuplicateDevies[device.id]) return;
        skipDuplicateDevies[device.id] = true;

        // skip audio devices
        if (device.kind.indexOf('audio') != -1) return;

        uniqueCamerasLength++;

        var button = document.createElement('button');
        button.id = device.id;
        button.innerHTML = device.label || device.id;
        button.onclick = function() {
            this.disabled = true;

            connection._mediaSources.video = this.id;
            connection._mediaSources.audio = null;

            connection.dontCaptureUserMedia = false;
            connection.captureUserMedia(function(stream) {
                connection.attachStreams.push(stream);
                connection.dontCaptureUserMedia = true;

                if (document.getElementById('broadcast-all-cameras').disabled == true) {
                    document.getElementById('broadcast-all-cameras').disabled = false;
                    // document.getElementById('broadcast-all-cameras').style.background = '-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.05, rgb(143, 231, 253)), to(rgb(255, 255, 255)))';

                    document.getElementById('broadcast-all-cameras').style.background = '-webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0.05, rgb(195, 35, 56)), to(rgb(255, 15, 15)))';
                    document.getElementById('broadcast-all-cameras').style.color = 'white';
                }

                if(connection.attachStreams.length >= uniqueCamerasLength) {
                    document.getElementById('broadcast-all-cameras').onclick();
                }
            });
        };
        buttonsContainer.appendChild(button);
    });
});

connection.connect();

document.getElementById('broadcast-all-cameras').onclick = function() {
    var that = document.getElementById('broadcast-all-cameras');
    that.disabled = true;
    that.style.background = 'rgba(216, 205, 205, 0.2)';
    that.style.color = 'rgb(27, 26, 26)';

    connection.sdpConstraints.mandatory = {
        OfferToReceiveAudio: false,
        OfferToReceiveVideo: false
    };

    connection.open();
};
</script>